<template>
  <div id="hitch-common-route">
    <div class="top_bar">
      <top-bar></top-bar>
    </div>
    <div class="container">
      <md-field class="position-box white-round-box">
        <md-input-item
          readonly
          title="家"
          placeholder="请设置家庭地址"
          :value="startPositionInfo?startPositionInfo.address.stationName:''"
          @click.native="selectStartPosition"
        >
          <md-icon name="jiating" slot="left"></md-icon>
        </md-input-item>
        <md-input-item
          readonly
          title="公司"
          placeholder="请设置公司地址"
          :value="endPositionInfo?endPositionInfo.address.stationName:''"
          @click.native="selectEndPostiion"
        >
          <md-icon name="gongsi_icon" slot="left"></md-icon>
        </md-input-item>
        <md-input-item
          readonly
          title="上班"
          placeholder="请设置上班时间"
          :value="startTimeInfo?startTimeInfo.text:''"
          @click.native="selectStartTime"
        >
          <md-icon name="time" slot="left"></md-icon>
        </md-input-item>
        <md-input-item
          readonly
          title="下班"
          placeholder="请设置下班时间"
          :value="endTimeInfo?endTimeInfo.text:''"
          @click.native="selectEndTime"
        >
          <md-icon name="time" slot="left"></md-icon>
        </md-input-item>
        <md-input-item readonly title="人数" placeholder="请设置出行人数" :value="num?num+'人':''" @click.native="selectNumber">
          <md-icon name="pc_pcrs" slot="left"></md-icon>
        </md-input-item>
      </md-field>
    </div>
    <div class="btn-box">
      <md-button @click="submit" :disabled="!formOK">保存</md-button>
    </div>
    <md-picker
      ref="timePicker"
      :cols="2"
      :data="timePickerData"
      v-model="showTimePicker"
      :title="isStartTimePicker?'请选择上班时间':'请选择下班时间'"
      @confirm="onDatePickerConfirm"
    ></md-picker>
    <md-picker
      ref="numPicker"
      :cols="1"
      :data="numPickerData"
      v-model="showNumPicker"
      title="请设置出行人数"
      @confirm="onNumPickerConfirm"
    ></md-picker>
  </div>
</template>

<script>
import '@/assets/svgs/gongsi_icon.svg';
import '@/assets/svgs/jiating.svg';
import '@/assets/svgs/time.svg';
import '@/assets/svgs/pc_pcrs.svg';
import TopBar from '@/components/TopBar';
import { Dialog, Button, Icon, DatePicker, Picker, InputItem, Field } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Popup from './popup';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('hitchhike');
export default {
  name: 'hitch-common-route',
  data() {
    return {
      startPositionInfo: null,
      endPositionInfo: null,
      startTimeInfo: null,
      endTimeInfo: null,
      num: null,
      showTimePicker: false,
      showNumPicker: false,
      timePickerData: [],
      numPickerData: [[{ text: '1' }, { text: '2' }, { text: '3' }, { text: '4' }]],
      isStartTimePicker: true,
      formOK: false
    };
  },
  components: {
    [TopBar.name]: TopBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [DatePicker.name]: DatePicker,
    [Picker.name]: Picker,
    [InputItem.name]: InputItem,
    [Field.name]: Field
  },
  created() {
    let hourArr = [];
    for (let i = 0; i < 24; i++) {
      let obj = {
        text: i < 10 ? '0' + i : i.toString(),
        value: i
      };
      hourArr.push(obj);
    }
    let minArr = [];
    for (let i = 0; i < 60; i += 5) {
      let obj = {
        text: i < 10 ? '0' + i : i.toString(),
        value: i
      };
      minArr.push(obj);
    }
    this.timePickerData.push(hourArr);
    this.timePickerData.push(minArr);
    // if (this.gotoWorkInfo) {
    //   this.startPositionInfo = this.gotoWorkInfo.startInfo;
    //   this.endPositionInfo = this.gotoWorkInfo.endInfo;
    //   this.num = this.gotoWorkInfo.numberInfo.number;
    // }
    // if (this.commonPlaces) {
    //   this.startTimeInfo = { text: this.commonPlaces.startTime };
    //   this.endTimeInfo = { text: this.commonPlaces.endTime };
    // }
  },
  methods: {
    ...mapActions(['submitCommonPlaces']),

    async submit() {
      let params = {
        originLngLat: encryptByDESModeEBC(
          this.coordToString(this.startPositionInfo.address.coordinate)
        ),
        originCityName: this.startPositionInfo.city.cityName,
        originShortAddress: this.startPositionInfo.address.stationName,
        originLongAddress: this.startPositionInfo.address.position,
        destLngLat: encryptByDESModeEBC(
          this.coordToString(this.endPositionInfo.address.coordinate)
        ),
        destCityName: this.endPositionInfo.city.cityName,
        destShortAddress: this.endPositionInfo.address.stationName,
        destLongAddress: this.endPositionInfo.address.position,
        startTime: this.startTimeInfo.text,
        startTimeHour: this.startTimeInfo.hour.toString(),
        startTimeMinute: this.startTimeInfo.minute.toString(),
        endTimeHour: this.endTimeInfo.hour.toString(),
        endTimeMinute: this.endTimeInfo.minute.toString(),
        endTime: this.endTimeInfo.text,
        originCityId: this.startPositionInfo.city.cityId,
        destCityId: this.endPositionInfo.city.cityId,
        userNumber: this.num,
        lineId: this.commonPlaces ? this.commonPlaces.lineId : undefined,
        userId: this.$store.getters.currentUser.user_id
      };
      try {
        await this.submitCommonPlaces(params);
      } catch (error) {
        console.log(error);
        return;
      }
      this.showSuccess();
    },
    checkForm() {
      if (
        this.startPositionInfo &&
        this.endPositionInfo &&
        this.startTimeInfo &&
        this.endTimeInfo &&
        this.num
      ) {
        this.formOK = true;
      } else {
        this.formOK = false;
      }
    },
    showSuccess() {
      Dialog.alert({
        title: '保存成功',
        onConfirm: () => {
          this.$router.go(-1);
        }
      });
    },
    async selectStartPosition() {
      this.startPositionInfo = await Popup.selectStartPosition();
      console.log(this.startPositionInfo);
      this.checkForm();
    },
    async selectEndPostiion() {
      this.endPositionInfo = await Popup.selectEndPosition();
      this.checkForm();
    },
    selectStartTime() {
      this.isStartTimePicker = true;
      this.showTimePicker = true;
    },
    selectEndTime() {
      this.isStartTimePicker = false;
      this.showTimePicker = true;
    },
    selectNumber() {
      this.showNumPicker = true;
    },
    onDatePickerConfirm(values) {
      if (this.isStartTimePicker) {
        this.startTimeInfo = {
          hour: values[0].value,
          minute: values[1].value,
          text: values[0].text + ':' + values[1].text
        };
      } else {
        this.endTimeInfo = {
          hour: values[0].value,
          minute: values[1].value,
          text: values[0].text + ':' + values[1].text
        };
      }
      this.checkForm();
    },
    onNumPickerConfirm(values) {
      this.num = values[0].text;
      this.checkForm();
    },
    coordToString(coordinate) {
      return coordinate[0] + ',' + coordinate[1];
    }
  },
  computed: {
    ...mapGetters(['commonPlaces', 'gotoHomeInfo', 'gotoWorkInfo'])
  }
};
</script>

<style lang="stylus">
#hitch-common-route {
  background-color: color-primary-background;
  height: 100vh;
  box-sizing: border-box;

  .md-input-item .fixed {
    width: 60px;
  }

  .container {
    padding: 20px;
    box-sizing: border-box;
    height: calc(100vh - 228px);
  }

  .white-round-box {
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
  }

  .time-box {
    margin-top: 20px;
    margin-bottom: 20px;

    .time-item-box {
      flex: 1;
    }
  }

  .btn-box {
    box-sizing: border-box;
    padding: 20px;
  }
}
</style>